<template>
  <el-dialog
    :title="title"
    v-model="visiabled"
    :append-to-body="false"
    width="1400px"
    height="700px"
    class="avue-dialog avue-dialog--top"
    custom-class="no-footer"
    @close="dialogClose"
  >
    <el-container>
      <div id="entityRelation" style="width: 1380px; height: 600px"></div>
    </el-container>
    <div class="avue-dialog__footer">
      <el-button type="primary" class="el-icon-link" @click="showLink"
        >显示当前对象关联</el-button
      >
      <el-button @click="showLinkMe">显示引用当前对象</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { apiGetEr } from '@/apis/objectModel/businessType.js'
import go from 'gojs'
export default {
  name: 'busEr',
  components: {},
  data() {
    return {
      visiabled: false,
      myDiagram: {},
      tabViewList: [],
      tabRelView: [],
      form: '',
      title: '业务对象E-R图',
      obj: {},
    }
  },
  created() {},
  methods: {
    show(row) {
      let elementById = document.getElementById('entityRelation')
      if (elementById) {
        elementById.innerHTML = ''
      }
      if (this.myDiagram) {
        this.myDiagram.div = null
        this.myDiagram = {}
      }
      this.title = row.code + ' ' + row.name + '__关联的对象'
      this.visiabled = true
      this.sourceData = row
      this.tabRelView = []
      this.tabViewList = []
      apiGetEr(row.id).then((res) => {
        this.showNodes(res)
      })
    },
    showLink() {
      if (this.myDiagram) {
        this.myDiagram.div = null
        this.myDiagram = {}
      }
      this.title =
        this.sourceData.code + ' ' + this.sourceData.name + '__关联的对象'
      this.tabRelView = []
      this.tabViewList = []
      apiGetEr(this.sourceData.id).then((res) => {
        this.showNodes(res)
      })
    },
    showLinkMe() {
      if (this.myDiagram) {
        this.myDiagram.div = null
        this.myDiagram = {}
      }
      this.title =
        '引用__' +
        this.sourceData.code +
        ' ' +
        this.sourceData.name +
        '__的对象'
      this.tabRelView = []
      this.tabViewList = []
      // linkMeEr(this.sourceData.id).then((res) => {
      //   this.showNodes(res)
      // })
    },
    wrapperNode() {
      var mainItems = []
      if (this.obj.attributesVOList && this.obj.attributesVOList.length > 0) {
        mainItems = this.obj.attributesVOList.map((val) => {
          return {
            name: val.code + ' ' + val.name,
            isKey: val.code === 'id',
            figure: '',
            color: '#1c446f',
          }
        })
      }
      this.tabViewList.push({
        key: this.obj.code + ' ' + this.obj.name,
        items: mainItems,
      })
      if (this.obj.linkBuss) {
        this.obj.linkBuss.forEach((val) => {
          var linkItems = []
          if (val.attributesVOList && val.attributesVOList.length > 0) {
            linkItems = val.attributesVOList.map((vo) => {
              return {
                name: vo.code + ' ' + vo.name,
                isKey: vo.code === 'id',
                figure: '',
                color: '#1c446f',
              }
            })
          }
          this.tabViewList.push({
            key: val.code + ' ' + val.name,
            items: linkItems,
          })
          this.tabRelView.push({
            from: this.obj.code + ' ' + this.obj.name,
            to: val.code + ' ' + val.name,
            text: '',
            toText: '',
          })
        })
      }
    },
    showNodes(res) {
      if (res) {
        this.obj = res
        this.wrapperNode()
        const $ = go.GraphObject.make
        this.myDiagram = $(go.Diagram, 'entityRelation', {
          initialContentAlignment: go.Spot.Center,
          allowDelete: false,
          allowCopy: false,
          layout: $(go.ForceDirectedLayout),
          'undoManager.isEnabled': true,
        })

        this.myDiagram.nodeTemplate = $(
          go.Node,
          'Auto',
          {
            selectionAdorned: true,
            resizable: true,
            layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
            fromSpot: go.Spot.AllSides,
            toSpot: go.Spot.AllSides,
            isShadowed: true,
            shadowColor: '#CCAA',
          },
          new go.Binding('location', 'location').makeTwoWay(),
          new go.Binding('desiredSize', 'visible', function () {
            return new go.Size(NaN, NaN)
          }).ofObject('LIST'),
          $(
            go.Shape,
            'Rectangle',
            new go.Binding('fill', 'isHighlighted', function (h) {
              return h ? '#F44336' : '#A7E7FC'
            }).ofObject()
          ),
          $(
            go.Panel,
            'Table',
            { margin: 15, stretch: go.GraphObject.Fill },
            $(go.RowColumnDefinition, {
              row: 0,
              sizing: go.RowColumnDefinition.None,
            }),
            // the table header
            $(
              go.TextBlock,
              {
                row: 0,
                alignment: go.Spot.Center,
                margin: new go.Margin(0, 14, 0, 2), // leave room for Button
                font: 'bold 16px sans-serif',
              },
              new go.Binding('text', 'key')
            ),
            $(
              go.Panel,
              'Vertical',
              {
                name: 'LIST',
                row: 1,
                padding: 0, //表名到下边框的距离
                alignment: go.Spot.TopLeft,
                defaultAlignment: go.Spot.Left,
                stretch: go.GraphObject.Horizontal,
                //itemTemplate: itemTempl
              },
              new go.Binding('itemArray', 'items')
            )
          ) // end Table Panel
        ) // end Node

        // define the Link template, representing a relationship

        this.myDiagram.linkTemplate = $(
          go.Link, // the whole link panel
          {
            selectionAdorned: true,
            layerName: 'Foreground',
            reshapable: true,
            routing: go.Link.AvoidsNodes,
            corner: 5,
            curve: go.Link.JumpOver,
            toEndSegmentLength: 100,
          },
          $(
            go.Shape, // the link shape
            { stroke: '#303B45', strokeWidth: 2.5 }
          ),
          $(
            go.TextBlock, // the "from" label
            {
              textAlign: 'center',
              font: 'bold 14px sans-serif',
              stroke: '#1967B3',
              segmentIndex: 0,
              segmentOffset: new go.Point(NaN, NaN),
              segmentOrientation: go.Link.OrientUpright,
            },
            new go.Binding('text', 'text')
          ),
          $(
            go.TextBlock, // the "to" label
            {
              textAlign: 'center',
              font: 'bold 14px sans-serif',
              stroke: '#1967B3',
              segmentIndex: -1,
              segmentOffset: new go.Point(NaN, NaN),
              segmentOrientation: go.Link.OrientUpright,
            },
            new go.Binding('text', 'toText')
          )
        )

        this.myDiagram.model = $(go.GraphLinksModel, {
          nodeDataArray: this.tabViewList,
          linkDataArray: this.tabRelView,
        })
      }
    },
    dialogClose() {
      this.visiabled = false
      if (this.myDiagram) {
        this.myDiagram.isValid = false
        this.myDiagram.model = null
        this.myDiagram.toolManager = null
        this.myDiagram.diagramDiv = null
        this.myDiagram = null
      }
      this.$emit('cancel')
    },
  },
}

// defineExpose({
//   show,
// })
</script>
<style>
.no-footer .el-dialog__footer {
  display: none;
}
</style>
